import React, { Component } from 'react';
import { Scroller, Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js';
import yoHistory from '$common/history';
import './index.scss';
import ProjectData from '../../common/mock/project.json'


class Project extends Component {
    
    

   

    render() {
    

        var Data =  ProjectData.map(function(item,index){
                console.log(item)
            
               return(
                   
                   // key={index}必须要，否则报错
                   <div key={index} className="demo-group">
                         <Scroller.Sticky>
                         <div>
                             <h2 className="center" style={{fontSize:'18',color:"#5cadads"}}>{item.name}</h2><br/> 
                         </div>
                     </Scroller.Sticky>
                     <i className="iconfont icon-fengexian center" style={{color:"#5cadads"}}></i>
                             <br/>
                            <h3>项目基本信息：</h3>
                            <div className="item">
                                <i className="mark iconfont icon-yuan" style={{marginRight:'0.1rem'}}></i>
                                <span className="flex">{item.category}</span>
                            </div>
                            <div className="item">
                                <i className="mark iconfont icon-yuan" style={{marginRight:'0.1rem'}}></i>
                                <span className="flex">{item.url}</span>
                            </div>
                            <div className="item">
                                <i className="mark iconfont icon-yuan" style={{marginRight:'0.1rem'}}></i>
                                <span className="flex">{item.description}</span>
                            </div>
                            <div className="item">
                                <img src={item.image} style={{width:'100%'}}/>
                            </div>
                            
                           
                            
                            
                    </div>
                //    <li className="item"  key={index}>
                //        <time className="time">{item.time}</time>
                //        <div className="detail">
                //            <div className="yo-card">
                //                <h2 className="hd">{item.name}</h2>
                //                <div className="hd">
                //                    <h3 className="item">基本信息：</h3><br/>
                //                    <div className="item">企业性质：{item.category}</div>
                //                    <div className="item">公司网址：{item.url}</div>
                //                    <div className="item">所在部门：{item.division}</div>
                //                    <div className="item">职位：{item.posts}</div>
                //                </div>
                //            </div>
                //        </div>
                //    </li>  
               
               )
   
               
           })




        
        return (
            <div className="yo-flex">
                <Header title="项目" left={false}/>
                <Scroller extraClass="flex">
                    <div className="m-content">
                        
                            
                   
                    {Data}
            
                        {/* <h3>Hello Yo!</h3>
                        <p>和我们一起进入 Yo 的世界</p> */}
                    
                       
                    
                    </div>
                </Scroller>
                <Footer left={false}/>
            </div>
        )
    }
}



export default Project;
